<template>
  <!-- 搜索历史 -->
  <div class="search-history">
    <van-cell class="isSH" title="搜索历史">
      <div v-if="isDelete">
        <span @click="allDelete">全选删除</span>
        &nbsp;&nbsp;
        <span @click="isDelete = false">完成</span>
      </div>
      <van-icon v-else name="delete-o" @click="isDelete = true" />
    </van-cell>
    <van-cell v-for="(item, index) in historyList" :key="index" :title="item" @click="handleEdit(item, index)">
      <van-icon v-show="isDelete" name="close" />
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    historyList: {
      type: Array,
      require: true
    }
  },
  data () {
    return {
      isDelete: false
    }
  },
  methods: {
    // 未删除和删除状态下 点击搜索历史项
    handleEdit (item, index) {
      if (this.isDelete) {
        // 删除状态
        // this.$emit('deleteHistory', index)
        // 1
        this.historyList.splice(index, 1)
      } else {
        // 点击跳转到 result
        this.$emit('goResult', item)
      }
    },
    allDelete () {
      this.$dialog.confirm({
        message: '清空搜索历史？'
      })
        .then(() => {
          // on confirm
          this.isDelete = false
          this.$emit('alldelete')
          // if (confirm) {
          //   this.isDelete = false
          //   this.$emit('alldelete')
          // }
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
.search-history {
  padding-top: 114px;
  .isSH {
    .van-icon-delete-o {
      font-size: 30px;
      line-height: 48px;
    }
  }
}
</style>
